@model List<zhangmenren.Models.ViewModle.WorksModel>
<div class="bg-white">

	<header class="mui-bar mui-bar-nav head-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href='@Url.Action("Index","Home")'></a>
		<h1 class="mui-title">教程资料</h1>
        <a class="mui-icon mui-icon-more mui-pull-right" onclick="jsBridge.share()"></a>
	</header>
	<!--DOM -->
	<div class="mui-content bg-white">
		<!-- Swiper -->
		<div class="swiper-container index-banner-swiper">
			<div class="swiper-wrapper">
				@if (ViewBag.Banner != null && (ViewBag.Banner as List<BannerEntity>)?.Count > 0)
				{
					foreach (var item in ViewBag.Banner as List<BannerEntity>)
					{
						<div class="swiper-slide">
							<img class="swiper-lazy" data-src="@item.ImgUrl" />
						</div>
					}
				}
				else
				{

					<div class="swiper-slide">
						<img class="swiper-lazy" data-src="/images/index-banner-img1.jpg" alt="" />
					</div>
				}
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<!---->
		<div class="search-item-box">
			<span class="search-head">
				按名称搜索
			</span>
			<div class="search-body">
				<input type="text" placeholder="请输入搜索内容" class="j-souoval" />
			</div>
           <a href="javascript:;" class="j-souo">搜索</a>
		</div>
		<!---->
		<h2 class="header-title-item" style="margin: 10px 15px 0; ">
			教程资料
		</h2>

		@if (Model.Any())
		{
			<ul class="mui-table-view watch-record-list tutorial-information-list">
				@foreach (var item in Model)
				{
					<li class="mui-table-view-cell mui-media">
						<a class="mui-navigate-right" href='@Url.Action("Detail",new {id=item.Id })'>
							<div class="mui-media-object mui-pull-left">
								<img src="@item.CoverImg">
							</div>
							<div class="mui-media-body">
								<h5>@item.Title</h5>
								<p>作者 ：@item.Author <span class="mui-badge mui-badge-inverted mui-pull-right mui-badge-yellow">@(item.Price==0?"免费": "￥"+ item.Price.ToString("0.##"))</span></p>
							</div>
						</a>
					</li>
				}



				@*<li class="mui-table-view-cell mui-media">
						<a class="mui-navigate-right" href='tutorial-information-detail.html'>
							<div class="mui-media-object mui-pull-left">
								<img src="images/tuinfo-list-img1.png">
							</div>
							<div class="mui-media-body">
								<h5>软件运用规范</h5>
								<p>作者 ：晓燕 <span class="mui-badge mui-badge-inverted mui-pull-right mui-badge-yellow">￥10.00</span></p>
							</div>
						</a>
					</li>*@

			</ul>
		}
		else
		{
			<span>暂无数据</span>
		}


	</div>

</div>
@section Scripts{
<script>
    var swiper = new Swiper('.swiper-container', {
            slidesPerView: 3,
            speed: 700,
            spaceBetween: 0,
            slidesPerView: 'auto',
            centeredSlides: true,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            //          autoplay: {
            //              delay: 3000,
            //              stopOnLastSlide: false,
            //              disableOnInteraction: false,
            //          },
            lazy: {
                loadPrevNext: true,
                loadOnTransitionStart: false,
                loadPrevNextAmount: 1,
            },
        });

        swiper.lazy.load();
		
		
				$(".j-souo").click(function () {
					$.ajax({
						type:'post',
						url:'@Url.Action("Search")',
						data:{key:$.trim($('.j-souoval').val())},
						success:function(result){
							if (result.state=="ok") {
								console.log(result)
								var htmls='';
								if (result.data.length>0) {
									for (let i = 0; i < result.data.length; i++) {
										var str=(result.data[i].price-0)==0?'免费': '￥'+ result.data[i].price;
										htmls+='<li class="mui-table-view-cell mui-media"><a class="mui-navigate-right" href="/JiaoChengZL/Detail?id='+result.data[i].id+'"><div class="mui-media-object mui-pull-left"><img src="'+result.data[i].coverImg+'"></div><div class="mui-media-body"><h5>'+result.data[i].title+'</h5><p>作者 ：'+result.data[i].author+' <span class="mui-badge mui-badge-inverted mui-pull-right mui-badge-yellow">'+str+'</span></p></div></a></li>';

									}
								}else{
									htmls="<span>暂无数据</span>"
								}
								
		
								$('.tutorial-information-list').html(htmls);
							}
							
						}
					})
				})		
		
</script>


}